<template>
  <div class="app-container">
    <div class="inquire-header">
      <div class="input-list">
        <div class="gap-1 mb-4" style="align-items: center">
          <div class="list-name">车牌号码</div>
          <el-input v-model="input1" style="width: 240px" placeholder="请输入" />
        </div>
        <div class="gap-1 mb-4" style="align-items: center; margin-left: 115px">
          <div class="list-name">车辆分组</div>
          <el-input v-model="input2" style="width: 224px" placeholder="请输入" />
        </div>
        <div class="gap-1 mb-4" style="align-items: center; margin-left: 115px">
          <div class="list-name">告警时间</div>
          <el-input v-model="input3" style="width: 224px" placeholder="请输入" />
        </div>
        <div class="gap-1 mb-4" style="align-items: center; margin-left: 115px">
          <div class="list-name">告警类型</div>
          <el-input v-model="input4" style="width: 224px" placeholder="请输入" />
        </div>
        <div class="gap-1 mb-4" style="align-items: center; margin-left: 115px">
          <div class="list-name">所属部门</div>
          <el-input v-model="input5" style="width: 224px" placeholder="请输入" />
        </div>
      </div>
      <div flex>
        <div class="flex gap-1 mb-4" style="align-items: center">
          <div class="gap-1 mb-4" style="align-items: center">
            <div class="list-name" style="margin-bottom: 6px; font-size: 14px">车辆状态</div>
            <el-input v-model="input6" style="width: 224px" placeholder="请输入" />
          </div>
        </div>
        <div class="list-btn">
          <el-button class="btn-reset" @click="resetSearch" plain>重置</el-button>
          <!-- <div class="btn-reset" :class="{ active: activeBtn === 'search' }" @click="searchData">查询</div> -->
        </div>
      </div>
    </div>
    <div class="inquire-container">
      <div class="inquire-item-header">
        <div class="section">告警信息</div>
      </div>
      <div class="covered-table">
        <el-table
          :data="paginatedFilteredData"
          style="width: 100%"
          class="topsoil-tab"
          @selection-change="handleSelectionChange"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column type="selection" width="30" />
          <el-table-column prop="licensePlate" label="车牌号码" align="center" />
          <el-table-column prop="vehicleGroup" label="车辆分组" align="center" />
          <el-table-column prop="alertTime" label="创建时间" align="center" />
          <el-table-column prop="alertLocation" label="告警地点" align="center" />
          <el-table-column prop="alertType" label="告警类型" align="center" />
          <el-table-column prop="status" label="状态" align="center">
            <template #default="scope">
              <div style="display: flex; align-items: center" flex justify-center>
                <!-- 根据状态显示不同颜色的圆点 -->
                <span
                  :style="{
                    display: 'inline-block',
                    width: '7px',
                    height: '7px',
                    borderRadius: '50%',
                    backgroundColor: scope.row.status === '已处理' ? '#059669' : 'rgba(0,0,0,0.25)',
                    marginRight: '8px'
                  }"
                />
                <span>{{ scope.row.status }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" align="center">
            <template #default="scope">
              <div v-if="scope.row.status === '已处理'" class="btn-handle" @click="handleClick(scope.row, '查看详情')">
                查看详情
              </div>
              <div v-else flex justify-center>
                <div class="btn-handle" @click="handleClick(scope.row, '处理')">处理</div>
                <div class="btn-locus" @click="handleClick(scope.row, '行车轨迹')">行车轨迹</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="true"
            layout="total, prev, pager, next, jumper"
            :page-sizes="[9, 18, 27]"
            :total="tableData.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 预览弹窗 -->
      <dioagPage v-model:visible="dialogVisible" :data="multipleSelection" :title="dialogTitle" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, Ref, onMounted, nextTick } from "vue"
import dioagPage from "./com/dioagPage.vue"

interface User {
  licensePlate: string
  vehicleGroup: string
  alertTime: string
  alertLocation: string
  alertType: string
  status: string
}
const input1 = ref("")
const input2 = ref("")
const input3 = ref("")
const input4 = ref("")
const input5 = ref("")
const input6 = ref("")
const radio1 = ref("")
// 追踪激活的按钮
const activeBtn = ref<string>("")

// 重置查询
const resetSearch = () => {
  input1.value = ""
  input2.value = ""
  input3.value = ""
  input4.value = ""
  radio1.value = "1"
  //   currentPage.value = 1
  activeBtn.value = "reset"
}
const tableData: Ref<User[]> = ref([
  {
    licensePlate: "甘D3B0Z4",
    vehicleGroup: "默认分组1",
    alertTime: "2024-09-21 09:52:38",
    alertLocation: "四川省眉山市",
    alertType: "无计划",
    status: "未处理"
  },
  {
    licensePlate: "蒙FA11T3",
    vehicleGroup: "默认分组",
    alertTime: "2024-09-21 08:52:22",
    alertLocation: "四川省眉山市",
    alertType: "疑似无计划",
    status: "已处理"
  },
  {
    licensePlate: "鄂G78J0H",
    vehicleGroup: "默认分组",
    alertTime: "2024-09-17 15:42:08",
    alertLocation: "四川省眉山市",
    alertType: "无计划",
    status: "已处理"
  },
  {
    licensePlate: "青E68YP8",
    vehicleGroup: "默认分组",
    alertTime: "2024-09-15 16:46:02",
    alertLocation: "四川省眉山市",
    alertType: "外出提醒",
    status: "未处理"
  },
  {
    licensePlate: "甘JJ91Y6",
    vehicleGroup: "默认分组",
    alertTime: "2024-09-01 17:27:51",
    alertLocation: "四川省眉山市",
    alertType: "疑似无计划",
    status: "已处理"
  },
  {
    licensePlate: "沪CYN950",
    vehicleGroup: "默认分组",
    alertTime: "2024-09-01 00:01:19",
    alertLocation: "四川省眉山市",
    alertType: "疑似无计划",
    status: "已处理"
  },
  {
    licensePlate: "川L4V3D4",
    vehicleGroup: "默认分组",
    alertTime: "2024-08-26 21:52:09",
    alertLocation: "四川省眉山市",
    alertType: "疑似无计划",
    status: "已处理"
  },
  {
    licensePlate: "陕VR725X",
    vehicleGroup: "默认分组",
    alertTime: "2024-08-23 05:09:53",
    alertLocation: "四川省眉山市",
    alertType: "疑似无计划",
    status: "已处理"
  },
  {
    licensePlate: "云JX841Z",
    vehicleGroup: "默认分组",
    alertTime: "2024-07-01 19:04:56",
    alertLocation: "四川省眉山市",
    alertType: "疑似无计划",
    status: "已处理"
  },
  {
    licensePlate: "云JX841Z",
    vehicleGroup: "默认分组",
    alertTime: "2024-07-01 19:04:56",
    alertLocation: "四川省眉山市",
    alertType: "疑似无计划",
    status: "已处理"
  }
])
const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

// 点击查询按钮
// const searchData = () => {
//   currentPage.value = 1
// }

// 分页相关的状态
const currentPage = ref(1) // 当前页码
const pageSize = ref(9) // 每页显示条目数

// 根据输入框的内容筛选表格数据
const filteredData = computed(() => {
  const query = input1.value.trim().toLowerCase() //车辆号码
  const num = input2.value.trim().toLowerCase() // 车辆分组
  const person = input3.value.trim().toLowerCase() // 告警时间
  const queryArr = input4.value.trim().toLowerCase() //告警类型
  // const department = input5.value.trim().toLowerCase() //所属部门
  const status = input6.value.trim().toLowerCase() // 车辆状态
  if (!query && !person && !queryArr && !status && !num) {
    return tableData.value // 如果没有输入查询条件，返回全部数据
  }
  return tableData.value.filter(
    (item) =>
      (query && String(item.licensePlate).toLowerCase().includes(query)) ||
      (num && String(item.vehicleGroup).toLowerCase().includes(num)) ||
      (person && String(item.alertTime).toLowerCase().includes(person)) ||
      (queryArr && String(item.alertType).toLowerCase().includes(queryArr)) ||
      (status && String(item.status).toLowerCase().includes(status))
  )
})

// 根据分页展示过滤后的数据
const paginatedFilteredData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredData.value.slice(start, end)
})
// 处理分页变化
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
}
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
}

// 验证规则
const rules = reactive({
  name: [{ required: true, message: "公司服务名称不能为空", trigger: "blur" }],
  id: [{ required: true, message: "单位ID不能为空", trigger: "blur" }],
  person: [{ required: true, message: "单位负责人不能为空", trigger: "blur" }],
  date: [{ required: true, message: "添加时间不能为空", trigger: "blur" }],
  telephone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }]
})
// 引用表单实例

const dialogVisible = ref(false) // 控制弹窗是否可见
const dialogTitle = ref("") // 弹窗标题

const handleClick = (row, title) => {
  multipleSelection.value = [row] // 假设你要显示选中的数据
  dialogTitle.value = title
  dialogVisible.value = true
}
// // 地图相关
// const onLoad = () => {
//   // 确保地图容器存在
//   const mapContainer = document.getElementById("mapDiv")
//   if (!mapContainer) {
//     console.error("Map container not found!")
//     return
//   }

//   const map = new T.Map("mapDiv") // 创建地图实例
//   map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12) // 设置中心点和缩放级别
// }

onMounted(() => {
  nextTick(() => {
    // onLoad() // 在 DOM 更新后调用初始化函数
  })
})
</script>

<style lang="scss" scoped>
@import "@/styles/global.scss";
.inquire-container {
  width: 100%;
  height: 91%;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  margin: 16px 0 20px 0;
  padding: 20px 23px;
  .inquire-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .section {
    font-family: AlibabaPuHuiTi20;
    font-weight: bold;
    font-size: 16px;
    color: #000000;
  }
  .input-btn {
    width: 82px;
    height: 32px;
    background: #059669;
    border-radius: 3px 3px 3px 3px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    span {
      margin-left: 4px;
    }
  }
}
.covered-table {
  width: 100%;
  position: relative;
  .demo-pagination-block {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  .details-content {
    height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 10px;
    .details-item {
      display: flex;

      .details-text {
        width: 100px;
        text-align: right;
        margin-right: 15px;
      }
    }
    .map-container {
      width: 396px;
      height: 134px;
      border-radius: 6px 6px 6px 6px;
      background-color: #000;
      margin-left: 30px;
    }
  }
  .btn-handle:hover {
    color: #059669; // 激活状态背景颜色
  }
  .btn-locus {
    margin-left: 10px;
  }
  .btn-locus:hover {
    color: #059669; // 激活状态背景颜色
  }
}
.inquire-header {
  width: 100%;
  height: 156px;
  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #e4e4e7;
  align-items: center;
  padding: 10px 23px;
  .input-list {
    display: flex;
    align-items: center;
    margin-top: 2px;
    .list-name {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85) !important;
      margin-bottom: 10px;
    }
  }
  .list-btn {
    cursor: pointer;
    margin-top: 24px;
    margin-left: 25px;

    .btn-reset {
      width: 64px;
      height: 31px;
      border-radius: 3px 3px 3px 3px;
      border: 1px solid #d9d9d9;
      text-align: center;
      line-height: 31px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
    .btn-reset:hover {
      background-color: #059669; // 激活状态背景颜色
      color: #fff; // 激活状态的字体颜色
    }

    .active {
      background-color: #059669; // 激活状态背景颜色
      color: #fff; // 激活状态的字体颜色
    }
  }
}

::v-deep .el-dialog__body {
  display: flex;
  align-items: center;
}
</style>
